﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <!--01
        blue div is parent and red div is child-->
    <div id="div1" style="width:200px;height:200px;background-color:blue;">
        <div id="div2" style="width:100px;height:100px;background-color:red;">
        </div>
    </div>
    <script>
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var clickHandler = function divClickHandler(event) {
            console.log(this.id);
        };
        //when red div 2 is clicked, we get div2 and then div1
        //div 2, the red square get processed first and then it's bubble's up div1 parent
        //the 3rd argument fasle allows bubbling
        //div1.addEventListener('click', clickHandler, false);
        //div2.addEventListener('click', clickHandler, false);
        //when red div 2 (child) is clicked, we get div1 and then div2
        //when we pass true as 3rd argument, the parent div execute first and then child gets execute
        div1.addEventListener('click', clickHandler, true);
        div2.addEventListener('click', clickHandler, true);
    </script>
    <!--02
    after parent execute, it's stops for further Propagation  -->
    <!--<div id="div1" style="width:200px;height:200px;background-color:blue;">
        <div id="div2" style="width:100px;height:100px;background-color:red;">
        </div>
    </div>
    <script>
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var clickHandler = function divClickHandler(event) {
            console.log(this.id);
            event.stopPropagation();
        };

        div1.addEventListener('click', clickHandler, true);
        div2.addEventListener('click', clickHandler, true);
    </script>-->
</body>
</html>